<script setup lang="ts">
const skills = [
  "Vue-Router",
  "Pinia",
  "Vueuse",
  "Naive UI",
  "Axios",
  "ECharts",
  "Tailwind CSS",
];
</script>
<template>
  <div
    class="w-full h-full relative from-teal-500 to-cyan-300 bg-gradient-to-br flex justify-center items-center"
  >
    <div class="w-1/2 text-white z-10">
      <h1 class="text-8xl first-letter:text-red-500">About</h1>
      <h2>This app is built with Vue3 and TypeScript</h2>
      <ul class="list-none items-center text-xl my-8">
        <li class="flex gap-2" v-for="skill in skills">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            class="inline-block h-6 w-6 stroke-current"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span>{{ skill }}</span>
        </li>
      </ul>
      <a
        class="inline-block p-4 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-teal-600 rounded-md cursor-pointer hover:bg-teal-500"
        @click="$router.push({ name: 'home' })"
      >
        look this !
      </a>
    </div>
    <svg
      class="fill-cyan-300 absolute bottom-0 col-start-1 row-start-1 h-auto w-full"
      width="1600"
      height="595"
      viewBox="0 0 1600 595"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 338L53.3 349.2C106.7 360.3 213.3 382.7 320 393.8C426.7 405 533.3 405 640 359.3C746.7 313.7 853.3 222.3 960 189.2C1066.7 156 1173.3 181 1280 159.2C1386.7 137.3 1493.3 68.7 1546.7 34.3L1600 0V595H1546.7C1493.3 595 1386.7 595 1280 595C1173.3 595 1066.7 595 960 595C853.3 595 746.7 595 640 595C533.3 595 426.7 595 320 595C213.3 595 106.7 595 53.3 595H0V338Z"
      ></path>
    </svg>
  </div>
</template>
